<template>
  <view>
    <view
      :class="['task-card', item.delay > 0 ? 'highlighted' : '']"
      v-for="(item, index) in taskData"
      :key="index"
      @click="goto(item.id)"
    >
      <view class="task-left">
        <view class="icon-wrapper status1" v-if="item.status == 1">
          <uni-icons
            type="download-filled"
            size="20"
            color="#1a6dcc"
          ></uni-icons>
        </view>
        <view class="icon-wrapper status2" v-if="item.status == 2">
          <uni-icons
            custom-prefix="iconfont"
            type="icon-exchange"
            size="20"
            color="#ff9900"
          ></uni-icons>
        </view>
        <view class="icon-wrapper status3" v-if="item.status == 3">
          <uni-icons
            custom-prefix="iconfont"
            type="icon-truck1196107easyiconnet"
            size="20"
            color="#4CAF50"
          ></uni-icons>
        </view>
      </view>
      <view class="task-right" v-if="item.status == 1">
        <!-- <view class="task-title">收车任务 - {{ item.brand }}</view> -->
        <view class="task-desc">客户车辆到达 - 预计{{ item.time }}</view>
        <!-- <view class="task-status overdue" v-if="item.delay>0">超时{{ item.delay }}分钟</view> -->
      </view>
      <view class="task-right" v-if="item.status == 2">
        <!-- <view class="task-title">中转接车 - {{ item.brand }}</view> -->
        <view class="task-desc">客户车辆到达 - 预计{{ item.time }}</view>
      </view>
      <view class="task-right" v-if="item.status == 3">
        <!-- <view class="task-title">交车任务 - {{ item.brand }}</view> -->
        <view class="task-desc">客户预约 - 预计{{ item.time }}</view>
      </view>
      <uni-icons type="right" size="20"></uni-icons>
    </view>
  </view>
</template>

<script setup>
defineProps({
  taskData: {
    type: Object,
    required: true,
  },
});
const emit = defineEmits(['goto']);
const goto=(id)=>{
  emit('goto',id)
}
</script>

<style lang="scss" scoped>
.task-card {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 30rpx 20rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
  position: relative;

  .task-right {
    flex: 1;
	display:flex;
	align-items:center;
    .task-title {
      font-size: 32rpx;
      color: #333;
    }

    .task-desc {
      font-size: 32rpx;
      color: #666;
    }
  }

  .task-left {
    width: 60rpx;
    height: 60rpx;
    margin-right: 20rpx;

    .icon-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8rpx;
      &.status1 {
        background-color: rgba(26, 109, 204, 0.15);
      }
      &.status2 {
        background-color: rgba(255, 153, 0, 0.15);
      }
      &.status3 {
        background-color: rgba(76, 175, 80, 0.15);
      }
    }
  }

  .overdue {
    font-size: 24rpx;
    color: #ff4d4f;
  }
}

.highlighted {
  background-color: #fff0f0;
  border-left: 8rpx solid #ff4d4f;
}
</style>
